<template>
  <div class="eqp-info-manage">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="never">
          <el-tree
            ref="tree"
            :expand-on-click-node="false"
            :data="data"
            :props="defaultProps"
            check-strictly
            accordion
            highlight-current
            default-expand-all
            node-key="id"
            @node-click="handleNodeClick"/>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never">
          <dynForm
            :info-form="infoForm"
            :search-tags="searchTags"
            :select-list="selectList"
          >
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="doSearch"
            >
              {{ $t('search') }}
            </el-button>
          </dynForm>
          <el-row >
            <el-col :span="24">
              <el-button
                v-btnPermission:add
                :disabled="isChecked"
                type="primary"
                icon="el-icon-plus"
                @click="doAdd">
                {{ $t('add') }}</el-button>
              <el-button
                v-btnPermission:edit
                :disabled="UpdateDisabled"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit">
                {{ $t('modify') }}</el-button>
              <el-button
                v-btnPermission:delete
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete"
              >{{ $t('delete') }}</el-button>
            </el-col>
          </el-row>
          <div :style="{marginTop: '20px'}">
            <dynTable
              ref="dynTable"
              :loading="tableLoading"
              :table-data="tableData"
              :table-columns="tableColumns"
              :handle-selection-change="handleSelectionChange"
              :row-click="rowClick"
            />
            <pagination
              :total="total"
              :page.sync="listQuery.page"
              :size.sync="listQuery.size"
              @pagination="onpagination"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <EqpManageModel ref="epManageModel" :layout-id="layoutId" @initList="initList"/>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { getTreeList } from '@/api/equipment/prodTreeNode'
import { getList, doDelete, getIsEqpType } from '@/api/equipment/eqpInfoManage'
import EqpManageModel from './components/TheEqpManageModel.vue'
export default {
  name: 'EqpInfoManage',
  components: { EqpManageModel },
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('eqpId'), prop: 'eqpName', tag: 'DynInput' }
    ]
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'layoutName', label: this.$t('equipmentLevel') },
      { prop: 'eqpName', label: this.$t('eqpId') },
      { prop: 'description', label: this.$t('description') },
      { prop: 'createTime', label: this.$t('createTime') },
      { prop: 'editTime', label: this.$t('editeTime') },
      { prop: 'status', label: this.$t('status'), templete: (_scope) => {
        return (
          <el-switch
            value={_scope.row.status}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'
            disabled/>
        )
      } },
      { prop: '', label: this.$t('details'), width: '80px', templete: (_scope) => {
        return (
          <el-link type='primary' underline={false}
            vOn:click={() => this.$refs.epManageModel.handleOpen(_scope.row, true)}
          >{this.$t('details')}</el-link>
        )
      } }
    ]
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      infoForm: {},
      layoutId: '',
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      tableLoading: false,
      isChecked: true
    }
  },
  created() {
    this.initList()
    this.initTreeList()
  },
  methods: {
    async initList() {
      this.tableLoading = true
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm, layoutId: this.layoutId }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    async initTreeList() {
      const res = await getTreeList({ check: 1 })
      this.data = res.data
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    doAdd() {
      this.$refs.epManageModel.handleOpen()
    },
    handleEdit() {
      this.$refs.epManageModel.handleOpen(this.multipleSelection[0], false)
    },
    handleDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => ele.id)
        doDelete({ ids }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    async handleNodeClick(data) {
      this.$refs.tree.setCheckedKeys([data.id])
      this.layoutId = data.id
      this.listQuery = { page: 1, size: 10 }
      this.total = 0
      const res = await getIsEqpType({ layoutId: data.id })
      this.isChecked = !res.data
      await this.initList()
    },
    onpagination(page) {
      this.listQuery = page
      this.initList()
    }
  }
}
</script>

<style scoped lang="scss">
.eqp-info-manage{
  background-color: #fff;
  padding: 20px;
}
</style>
